<!--查询列表-->

<template>
   <div class="searchlist">
        <!-- 把搜索组件挂载到页面 -->
        <!-- <search-header></search-header> -->
        <div class="my_header">
			<i class="mui-icon mui-icon-arrowleft" aria-hidden="true" @click="$router.back(-1)"></i>
			<van-search v-model="keyword" placeholder="请输入搜索关键词" show-action @search="onSearch">
				<div slot="action" class="cancel" @click="gohome">取消</div>
			</van-search>
		</div>



        <!-- 合计 -->
        <div class="total">
            <div class="tol">
                <span class="all">合计：<span class="peo">{{total}}</span></span>
            </div>
        </div>
        <!-- 员工信息1 -->
        <div class="info">
            <div class="infor">
                <div>员工姓名：<span class="xinxi">张三</span></div>
                <div>联系电话：<span class="xinxi">112334***</span></div>
                <div>身份证号：<span class="xinxi">1233456876***789</span></div>
            </div>
            <div class="infor">
                <div>上传时间：<span class="xinxi">2018-05-10</span></div>
                <div>名单类型：<span class="xinxi">简历造假、谋取私利、自离/不交接...</span></div>
                <div>所属公司：<span class="xinxi">金华第七感网络科技有限公司</span></div>
                <div class="detail">
                    <div class="cont">查看详情</div>
                </div>
            </div>
             <div class="infor">
                <div>上传时间：<span class="xinxi">2018-05-10</span></div>
                <div>名单类型：<span class="xinxi">简历造假、谋取私利、自离/不交接...</span></div>
                <div>所属公司：<span class="xinxi">金华第七感网络科技有限公司</span></div>
                <div class="detail">
                    <div class="cont">查看详情</div>
                </div>
            </div>
        </div>
        <!-- 员工信息2 -->
        <div class="info2">
               <div class="infor inform">
                    <div>员工姓名：<span class="xinxi">张三</span></div>
                    <div>联系电话：<span class="xinxi">112334***</span></div>
                    <div>身份证号：<span class="xinxi">1233456876***789</span></div>
                </div>
                <div class="infor inform">
                    <div>上传时间：<span class="xinxi">2018-05-10</span></div>
                    <div>名单类型：<span class="xinxi">简历造假、谋取私利、自离/不交接...</span></div>
                    <div>所属公司：<span class="xinxi">金华第七感网络科技有限公司</span></div>
                    <div class="detail">
                        <div class="cont">查看详情</div>
                    </div>
                </div>
        </div>
        <!-- 员工信息3 -->
        <div class="info3">
            <div class="infor">
                <div>员工姓名：<span class="xinxi">张三</span></div>
                <div>联系电话：<span class="xinxi">112334***</span></div>
                <div>身份证号：<span class="xinxi">1233456876***789</span></div>
            </div>
        </div>
   </div>

</template>
<script>
export default {
    data() {
        return {
            // keyword:'',
            havepic: true,
				keyword: '',
				token: '',
				getdatalist: [],
                currentdate: '',
				total: '',
				writeinfo: {
					img: '',
					content: '',
					head_img: '',
					name: '',
					total: ''
				},
            
        }
    },
    created() {
        // 根据查询记录传递过来的关键字进行搜索查询，并将查询结果渲染到页面
        var that = this;
		var keyword = that.$route.query.keyword;
        console.log(keyword);
        that.keyword=keyword;
        var token = localStorage.getItem("token");
        that.token = token;
        if(keyword != '') {
            that.getsearch(keyword);
        };

        $.ajax({
            url:'http://zcapi.hrgsxt.cn/api/Search/search',
            type:'get',
            dataType:'json',
            data:{
                token: that.token,
                keyword:that.keyword,
                type: 1
            },
            success: function(res) {
                console.log(res)
            }
        })


    },
    methods: {
        // 搜索
        onSearch() {
				this.getsearch(this.keyword);
		},

        //点击取消，跳转首页
		gohome() {
				this.$router.push({
					path: './',
				});
        },
        //头部搜索框---- 根据关键字查询
        getsearch(keyword) {
				// console.log(keyword + "进来");
				var that = this;
				$.ajax({
					type: "get",
					url: "http://zcapi.hrgsxt.cn/api/Search/search",
					data: {
						token: localStorage.getItem("token"),
						keyword: keyword,
						type: 0
					},
					cache: false,
					dataType: "json",
					success: function(data) {
						// console.log(JSON.stringify(data.data) + "查询数据");
						if(data.code == 201) {
							that.isgetdata = 0,
                            that.writeinfo = data.data,
                            that.total = data.data.total
						} else if(data.code == 200) {
							that.isgetdata = 1,
								//that.isnull = false,
								that.getdatalist = data.data.lost_list,
								that.total = data.data.total
						}

					}
				});

			},
    }
}
</script>

<style scoped>

.searchlist{
    background-color: #fff;
}

@media screen and (width: 320px) {
    .certificate .name>input{
    	top: 30%;
    }
}
.searchlist	.isdisplay {
		display: block !important;
	}
	
.searchlist	.my_header .van-search {
		background: rgba(0, 133, 240, 1) !important;
		height: 0.88rem;
		line-height: 0.88rem;
	}
	
.searchlist	.my_header input[type=search] {
		padding: 0px !important;
		margin: 0px !important;
	}
	
	.searchlist .my_header {
		height: .88rem;
		background: rgba(0, 133, 240, 1);
		text-align: center;
		color: #fff;
		position: fixed;
		z-index: 999;
		width: 100%;
		top: 0;
		padding: 0 .2rem;
		color: #FFFFFF;
	}
	
	.searchlist .my_header .cancel {
		color: #FFFFFF;
	}
	
	.searchlist .my_header i {
		font-size: .4rem;
		float: left;
		line-height: .88rem;
	}
	
	.searchlist .top1 {
		height: .88rem;
		line-height: .88rem;
	}
	


/* 总计 */
.total {
    margin-top: .88rem;
    height: .88rem;
    background-color: #fff;
    line-height: .88rem;
    padding: 0 .3rem;
    border-bottom: .01rem solid #ccc;
}
.total .tol {
    float: left;
}
.all {
    font-size: .28rem;
    color: #999;
}
.all .peo {
    color: #333;
}
/* .total .area {
    float: right;
}
.area span {
    font-size: .28rem;
    color: #0085F0;
} */

/* 员工信息 */
.info {
    margin-top: .3rem;
}
.infor {
    width: 92%;
    height: 1.7rem;
    background-color: #fff;
    border: .01rem solid #ccc;
    margin: 0 auto;
    padding: .2rem;
    position: relative;
}
.infor:nth-child(2) {
    border-top: 0;
    border-bottom: 0;
}
.infor div{
    height: .45rem;
    font-size: .26rem;
    color: #999;
}
.infor .xinxi{
    color: #333;
    /* white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  */
}
/* 查看详情 */
.detail {
    display: inline-block;
    width: .64rem;
    height: 1.7rem;   
    position: absolute;
    right: 0;
    top: 0; 
}
.detail .cont {
    width: .26rem;
    height: 1.7rem;
    line-height: 15px;
    font-size: .26rem;
    color: #0085F0;
    padding: .25rem .15rem;
    border-left: .001rem solid #ccc;
}

/* 员工信息2 */
.info2 {
    margin: .3rem 0;
}
.info2 .inform {
    border-bottom: .01rem solid #ccc;
}
</style>

